<template>
  <view>
    <view class="person-head">
      <cmd-avatar v-model="headerUrl" :src="headerUrl"  @click="fnInfoWin" size="lg" :make="{'background-color': '#fff'}"></cmd-avatar>
      <view class="person-head-box">
        <view class="person-head-nickname" v-model="username">{{username}}</view>
        <view class="person-head-username" v-model="id">ID：{{id}}</view>
      </view>
    </view>
    <view class="person-list">
      <cmd-cell-item title="主页" slot-left arrow @click="tohome">
        <cmd-icon type="bullet-list" size="24" color="#7ec14f"></cmd-icon>
      </cmd-cell-item>
      <cmd-cell-item title="收藏" slot-left arrow>
        <cmd-icon type="message" size="24" color="#7ec14f"></cmd-icon>
      </cmd-cell-item>
      <cmd-cell-item title="设置" slot-left arrow @click="toSettings">
        <cmd-icon type="settings" size="24" color="#7ec14f"></cmd-icon>
      </cmd-cell-item>
      <cmd-cell-item title="检查版本" addon="v1.0" slot-left arrow  arrow @click="toVersion">
        <cmd-icon type="alert-circle" size="24" color="#7ec14f"></cmd-icon>
      </cmd-cell-item>
    </view>
  </view>
</template>

<script>
  import cmdAvatar from "@/components/PersonPage/cmd-avatar/cmd-avatar.vue"
  import cmdIcon from "@/components/PersonPage/cmd-icon/cmd-icon.vue"
  import cmdCellItem from "@/components/PersonPage/cmd-cell-item/cmd-cell-item.vue"

  export default {
    components: {
      cmdAvatar,
      cmdCellItem,
      cmdIcon
    },
    data() {
      return {
		  username: '',
		  headerUrl: '',
		  id: '',
	  };
    },
	// onLoad() {
	// 	this.getwxinfo()
	// },
	onShow() {
		this.getwxinfo()
	},
    methods: {
      /**
       * 打开用户信息页
       */
      fnInfoWin() {
        uni.navigateTo({
		  url: '/pages/sub/person/info/info'
        })
      },
	  
	  tohome(){
		 uni.switchTab({
		 	url: '/pages/home/home'
		 })
	  },
	  toSettings(){
		  uni.navigateTo({
		  	url:'/pages/sub/other/settings/settings'
		  })
	  },
	  toVersion(){
	  		  uni.navigateTo({
	  		  	url:'/pages/sub/other/version/version'
	  		  })
	  },
	  getwxinfo(){

		  console.log("kais")
		  this.$http({
		  	url: "/api/wechat/checkLoginStatus",
		  	method: 'POST',
		  	data: {},
			header:{
				"ticket": uni.getStorageSync("ticket")
			}
		  }).then(res => {
			  console.log(res)
			     this.$data.username = res.data.data.user.username;
			    this.$data.headerUrl = res.data.data.user.headerUrl;
				this.$data.id = res.data.data.user.id;
			  
		  })
	  }
    }
  }
</script>

<style>
  .person-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 150px;
    padding-left: 20px;
    background: linear-gradient(to right, #6db33f, #c6ff96);
  }

  .person-head-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 10px;
  }

  .person-head-nickname {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
  }

  .person-head-username {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
  }

  .person-list {
    line-height: 0;
  }
</style>
